<!-- 单 违章 -->
<template>
  <div>
    <a-button style="margin-bottom: 20px" @click="addFee" type="primary">添加费用</a-button>
    <table-index @loadData="loadData" :table="tableCompulsory">
      <template #expand-icon="{ expanded }">
        <icon-plus-circle style="font-size: 20px; color: #0256ff" v-if="!expanded" />
        <icon-minus-circle style="font-size: 20px; color: #0256ff" v-else />
      </template>
      <template #selectkey>
        <div></div>
      </template>
      <template #feeNameSort="{ record }">
        <div v-if="record.mtype == 'MENU'" style="margin-left: 0">{{ record.feeName }}</div>
        <div v-if="record.mtype == 'TERM1'" style="margin-left: 20px">{{ record.feeName }}</div>
      </template>
      <template #payType="{ record }">
        <div>
          {{ record.payTypeName }}
          <a-tooltip v-if="record.payType == 4 && record.feeNameId == 55 && record.depositDeductionWay">
            <template #content>
              <div v-if="record.depositDeductionWay == 2">
                <div>违章押金>=违章费时，自动生成1条费用，支持操作</div>
              </div>
              <div v-else>
                <div>违章押金 {{ text1 }} 违章费时，自动生成两条费用</div>
                <div>费用1：押金抵扣费用，不支持操作</div>
                <div>押金2：剩余需要支付的违章费，支持操作，操作结果同步费用1</div>
              </div>
            </template>
            <icon-exclamation-circle style="font-size: 16px; color: #165dff; vertical-align: middle" />
          </a-tooltip>
        </div>
      </template>
    </table-index>
    <!-- 添加费用弹框 -->
    <a-modal v-model:visible="feeVisible" width="45vw">
      <template #title> 添加费用 </template>
      <template #footer>
        <a-space>
          <a-button @click="handleFeeCancel">关闭</a-button>
          <a-button type="primary" @click="handleFeeOk">确认</a-button>
        </a-space>
      </template>
      <span class="form-tlt">违章费用:</span>
      <page-form :model="form" layout="vertical" ref="formRef" class="page-form">
        <div class="mains">
          <page-form-row>
            <page-form-item label="罚款" size="1/2">
              <a-input-number
                :max="99999999.99"
                :min="0"
                placeholder="请输入"
                v-model="form.eventAmount"
                @blur="count()"
                hide-button
                :precision="2"
                :max-length="10"
              >
                <template #suffix> 元 </template>
              </a-input-number>
            </page-form-item>
            <page-form-item label="代办服务费" size="1/2">
              <a-input-number
                :max="99999999.99"
                :min="0"
                placeholder="请输入"
                v-model="form.handleAmount"
                @blur="count()"
                hide-button
                :precision="2"
                :max-length="10"
              >
                <template #suffix> 元 </template>
              </a-input-number>
            </page-form-item>
            <page-form-item label="违章代办真实成本" size="1/2">
              <i-input-number
                :max="99999999.99"
                :min="0"
                placeholder="请输入"
                v-model="form.handleRealCost"
                @blur="count()"
                hide-button
                :precision="2"
                :max-length="10"
              />
            </page-form-item>
          </page-form-row>
          <!-- <div class="mains-line"></div> -->
          <div class="all-count">
            <!-- <icon-info-circle-fill style="font-size: 16px; color: #165dffff; margin-top: 17px" /> -->
            <!-- <icon-exclamation-circle style="font-size: 16px; color: #165dffff; margin-top: 17px" /> -->
            <text>合计：</text>
            <span>{{ maintenanceAmount ? maintenanceAmount : '0' }}元</span>
          </div>
        </div>
      </page-form>
    </a-modal>
    <fee ref="feepage" @feepageConfirm="feepageConfirm" />
    <violationEditFeeModal ref="violationEditFee" @feepageConfirm="feepageConfirm" />
    <qcode-modal
      v-model:visible="payQCodeModal"
      :details="clickRecord"
      @close="payQCodeClose"
      :qcodeTitle="qcodeTitle"
      :qcodeCfLoading="qcodeCfLoading"
      @confirm="qcodeConfirm"
      :from="qrcodeFrom"
    />
  </div>
</template>

<script setup name="CostConfirmList" lang="ts">
  import fee from '@/views/confirmFee/violation/index.vue'
  import violationEditFeeModal from '@/views/editFee/violation/index.vue'
  import qcodeModal from '@/views/confirmFee/modals/qcode-modal.vue'

  import { ref, onMounted, watch } from 'vue'
  import { useTable } from '@/hooks/table'
  import { getViolationFeeAdd, getViolationDetail } from '@/api/finance/costConfirm'
  import { useRoute } from 'vue-router'
  import { cancelPay } from '@/api/common'
  import { Message } from '@arco-design/web-vue'

  const qrcodeFrom = ref('')
  const qcodeCfLoading = ref(false)
  const qcodeTitle = ref('收款码')
  const payQCodeModal = ref(false)
  const route = useRoute()
  const violationEditFee = ref()
  const text1 = ref('<')
  const clickRecord = ref()

  const props = defineProps({
    id: Number,
    carInfo: Object,
  })

  watch(
    () => route.path,
    (to, from) => {
      if (from == '/car-violation/editFees' || from == '/car-violation/confirmFees') {
        loadData()
      }
    }
  )
  const formRef = ref()
  const form = ref<any>({
    id: props.id,
    eventAmount: undefined,
    handleAmount: undefined,
  })
  const feepage = ref()
  const feeVisible = ref(false)
  const handleFeeOk = () => {
    getViolationFeeAdd({ ...form.value }).then((res: any) => {
      if (res.code == 200) {
        feeVisible.value = false
        loadData()
      }
    })
  }
  const handleFeeCancel = () => {
    feeVisible.value = false
  }
  const addFee = () => {
    feeVisible.value = true
    form.value = {
      id: Number(props.id),
      eventAmount: undefined,
      handleAmount: undefined,
    }
  }
  // 计算价格
  const maintenanceAmount = ref()
  const count = () => {
    maintenanceAmount.value =
      (form.value.eventAmount ? form.value.eventAmount : 0) +
      (form.value.handleAmount ? form.value.handleAmount : 0) -
      (form.value.handleRealCost ? form.value.handleRealCost : 0)
  }

  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: ' ', slotName: 'selectkey', width: 50, fixed: 'left' },
      { title: '费用名称', dataIndex: 'feeName', width: 240, slotName: 'feeNameSort', fixed: 'left' },
      { title: '费用类型', dataIndex: 'feeTypeName', width: 90 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 90 },
      { title: '费用金额', dataIndex: 'totalAmount', width: 110, unit: '元' },
      { title: '待结金额', dataIndex: 'outstandingAmount', unit: '元', width: 110 },
      { title: '生成节点', dataIndex: 'createNodeName', width: 90 },
      { title: '生成时间', dataIndex: 'createTime', width: 170 },
      { title: '收支方式', dataIndex: 'payTypeName', slotName: 'payType', width: 90 },
      { title: '费用状态', dataIndex: 'feeStatusName', width: 90 },
      { title: '收付款时间', dataIndex: 'payTime', width: 170 },
      { title: '确认时间', dataIndex: 'confirmTime', width: 170 },
      { title: '确认人', dataIndex: 'confirmUserName', width: 80 },
      { title: '费用备注', dataIndex: 'remark' },
      { title: '结算备注', dataIndex: 'settlementRemark' },
    ],
    operates: [
      // 费用分类(0 购置费 1保养 2维修 3年检 4违章)
      {
        label: '确认收款',
        // permission: 'svms:finance:costConfirm.confirm',
        show: (record: any) => record.level == 1 && record.ifCanConfirm == true && record.costType == 0,
        method: (record: any) => {
          feepage.value.show(JSON.stringify([record.id]), record)
        },
      },
      {
        label: '确认付款',
        // permission: 'svms:finance:costConfirm.confirm',
        show: (record: any) => record.level == 1 && record.ifCanConfirm == true && record.costType == 1,
        method: (record: any) => {
          feepage.value.show(JSON.stringify([record.id]), record)
        },
      },
      {
        label: '修改费用',
        // permission: 'svms:finance:costConfirm.edit',
        show: (record: any) => record.level == 1 && record.canModify == 1,
        method: (record: any) => {
          violationEditFee.value.show(record.id, record)
        },
      },
      {
        label: '收款码',
        permission: 'svms:asstes:operation:car-violation.qrcode',
        show: (record: any) => record.level == 1 && record.feeStatus == 6 && record.payType != 4,
        method: (record: any) => {
          console.log('收款码', record)

          qrcodeFrom.value = 'carViolationQRCode'
          qcodeTitle.value = '收款码'
          clickRecord.value = { ...record, bizType: 3, refId: record.businesId }
          payQCodeModal.value = true
        },
      },
      {
        // 取消收款
        label: '取消收款',
        permission: 'svms:asstes:operation:car-violation.qrcodeCancel',
        show: (record: any) => record.level == 1 && record.feeStatus == 6 && record.payType != 4,
        method: (record: any) => {
          console.log('取消收款', record)

          qrcodeFrom.value = 'carViolationCancel'
          qcodeTitle.value = '取消收款'
          clickRecord.value = { ...record, bizType: 3, refId: record.businesId }
          payQCodeModal.value = true
        },
      },
    ],
  })

  const payQCodeClose = () => {
    tableCompulsory.tableLoading = true
    setTimeout(() => {
      console.log('3s close')
      loadData()
    }, 3000)
  }

  const qcodeConfirm = (details: any) => {
    qcodeCfLoading.value = true

    cancelPay({ id: details.id })
      .then(() => {
        Message.success('取消收款成功')
        payQCodeModal.value = false
      })
      .finally(() => {
        qcodeCfLoading.value = false
      })
  }

  /**
   * 获取费用信息列表
   */
  const getViolationList = () => {
    return new Promise((resolve) => {
      getViolationDetail({ id: Number(props.id) }).then((res: any) => {
        const result = res.result
        const data = tabletolist(result.feeList) //表
        tableCompulsory.dataList = data
        resolve(data)
      })
    })
  }

  const loadData = () => {
    tableCompulsory.tableLoading = true

    getViolationList()
      .then((data) => {
        console.log('tableCompulsory', data)
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // 字段处理
  const tabletolist = (list: any) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM1'
          pl.expand = null
          pl.feeName = pl.itemName
          pl.totalAmount = pl.amount
        })
      } else {
        return false
      }
    })
    return list
  }
  // 确认成功
  const feepageConfirm = () => {
    loadData()
  }

  // 列表接口调用
  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .mains {
    position: relative;
    width: 100%;
    padding: 20px 0;
    max-height: 500px;
    .mains-tlt {
      font-size: 14px;
      color: #1d2129;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .mian-line {
        width: 3px;
        height: 16px;
        background-color: #165dff;
        margin-right: 8px;
      }
      .choose-mains {
        margin-left: 16px;
        display: inline-block;
        padding: 5px 16px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        background: #1890ff;
        border-radius: 2px;
      }
    }
    .mains-items {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .mains-item {
        margin-top: 10px;
        margin-right: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 8px;
        border: 1px solid #e5e6eb;
        border-radius: 2px;
      }
    }
    .mains-form-items {
      margin-top: 16px;
      width: 100%;
      .mains-form-item {
        width: 100%;
        .mains-form-tlt {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .mains-form-tlt-name {
            color: var(--color-text-1);
            font-weight: 500;
          }
          .main-icon {
            margin-left: 22px;
            cursor: pointer;
          }
        }
        .mains-form-in {
          width: 100%;
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // .mains-form-initem {
          //   width: 20%;
          //   margin-right: 10px;
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: flex-start;
          //   align-items: flex-start;
          // }
          .mains-form-in-c {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
  .mains-line {
    width: 100%;
    height: 1px;
    background-color: #f2f3f5;
  }
  .operate-btn {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    user-select: none;
    padding: 0 5px;
    icon {
      margin-right: 8px;
    }
    &.del {
      color: #ea0000;
    }
    &.new {
      color: #165dff;
    }
  }
  .box {
    width: 200px;
    height: 40px;
    border: 1px solid wheat;
  }
  .box:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search {
    display: flex;
    margin-bottom: 20px;
  }
  .quick-search-item {
    width: 16%;
    height: 62px;
    padding: 9px 0 9px 16px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #e5e8ef;
  }
  .quick-search-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search-item-checked {
    background: #e8f3ff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #1890ff;
  }
  .quick-search-item:nth-of-type(n + 2) {
    margin-left: 20px;
  }
  .quick-search-item-label {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
  }
  .quick-search-item-value {
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2129;
  }
  .quick-search-item-value-checked {
    color: #1890ff;
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .second-stage {
    width: 200px;
    margin-left: 260px;
  }
  .third-stage {
    width: 200px;
    margin-left: 30px;
  }
  .form-tlt {
    color: #4e5969;
    font-size: 14px;
  }
  .page-form {
    margin: 0;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .all-count {
    float: right;
    font-weight: 600;
    color: #1d2129;
    font-size: 14px;
    span {
      font-size: 16px;
      color: #165dff;
    }
  }
</style>
